<template>
    <div class="problem">
        <div class="problem-header">问题反馈</div>
        个税为自动计算，出错概率极低，请勿轻易提交错误报告！
        <div class="problem-list">
            <common-fieldset title="输入信息">
                <!-- <p class="title">错误条目(选择一个)：</p>
                <div class="checkbox">
                    <el-radio-group v-model="data.radios" class="ml-4">
                        <el-radio class="radio" label="个税" size="large">个税</el-radio>
                        <el-radio class="radios" label="其他" size="large">其他</el-radio>
                    </el-radio-group>
                </div> -->
                <div class="spec">
                    <p class="spec-titles">错误描述：</p>
                    <el-input type="textarea" v-model="data.value" :required="data.requireds" :rows="3"
                        placeholder="请输入问题，具体描述" />
                </div>
                <div class="buttons">
                    <el-button class="buttons-btn"  type="primary"
                        @click="confirm">确定</el-button>
                    <el-button class="buttonsf" type="info" @click="cancel">取消</el-button>
                </div>
            </common-fieldset>
        </div>
    </div>
</template>
<script setup>
import commonFieldset from '@/components/common/commonFieldset'
import { reactive, defineEmits, defineProps, watch } from 'vue';
import { checkError2 } from '@/api/salaryApi'
import { ElMessage } from 'element-plus'

const data = reactive({
    radios: '',
    value: '',
    visiable: true,
    requireds: false
})
const props = defineProps({
    id: { type: Number }
})
watch(() => [props.id], () => {
    console.log(props.id)
})
// 给父组件传递值 
const emits = defineEmits(['getChildren'])
// 确定
const confirm = () => {
    if (data.value == "") {
        ElMessage.error('请具体描述金额错误的部分！！！')
        return
    } else {
        data.visiable = !data.visiable
        const values = "错误条目：" + data.radios + ", 其具体内容为：" + data.value
        checkError2({
            errormessage: values,
            id: props.id
        }).then(res => {
            console.log(res)
            if (res.statusCode == 200) {
                ElMessage('问题反馈成功！！')
            }else{
                ElMessage(res.message)
            }
            emits('getChildren', data.visiable)
        })
    }
}

// 取消 并给父组件传递值
const cancel = () => {
    data.visiable = !data.visiable
    emits('getChildren', data.visiable)
}
</script>

<style scoped lang="scss">
.problem {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;

    &-header {
        height: 30px;
        width: 100%;
        font-size: 18px;
        text-align: center;
        line-height: 30px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    &-list {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 0 10px 10px 10px;
        box-sizing: border-box;

        .title {
            height: 25px;
            line-height: 25px;
            text-align: left;
            color: black;
        }

        .checkbox {
            height: 30px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding-left: 18px;
            box-sizing: border-box;

            .radio {
                height: 100%;
                width: 25%;
                text-align: left;
                font-size: 16px;
                line-height: 30px;
            }

            .radios {
                height: 100%;
                flex: 1;
                font-size: 16px;
                line-height: 30px;
            }
        }

        .spec {
            flex: 1;
            text-align: left;
            padding: 10px;

            &-titles {
                height: 30px;
                width: 100%;
                line-height: 25px;
                font-size: 16px;
                color: black;
            }
        }

        .buttons {
            height: 30px;
            width: 100%;
            margin:10px;
            line-height: 30px;
            padding: 0 20px 0 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            &-btn {
                height: 30px;
                width: 45%;
                letter-spacing: 2px;
                box-sizing: border-box;
            }

            .buttonsf {
                flex: 1;
                height: 30px;
                width: 50%;
                letter-spacing: 2px;
                box-sizing: border-box;
                margin-right: 20px;
            }
        }
    }
}
</style>